<template>
    <div>
        <div v-if="articleList.length == 0">
            <el-empty description="暂无相关文章" />
        </div>
        <!-- 文章卡片 -->
        <div v-else class="article-card">
            <div v-for="article in articleList" :key="article.id" class="card"
                :style="{ backgroundImage: `url(${config.downloadUrl}?name=${article.pic || defaultImage})` }">
                <div class="card__content" @click="toPrivate(article.id)">
                    <p class="card__title">{{ article.title }}</p>
                    <!-- 显示作者名称 -->
                    <p class="card__description">文章作者: {{ article.authorName || '加载中...' }}</p>
                    <p class="card__description">文章浏览量: {{ article.viewCount }}</p>
                </div>
            </div>
        </div>
        <private-details v-if="articleStore.isprvateOpen"/>
    </div>
</template>

<script setup name="private">
import { selectUserprivate } from '../../../api/article'
import { onMounted ,reactive,ref} from 'vue'
import config from '../../../../public/config'
import { ElMessage } from 'element-plus'
import { getuserMessage } from '../../../api/user'
import {useArticleStore} from '../../../stores/article'
import privateDetails from '../draw/privateDetails.vue'

const userId = localStorage.getItem("userId")
const articleList = reactive([]); // 文章列表
const loading = ref(true); // 加载状态
const defaultImage = '1c7774d3-d275-411f-aa4d-30e900f5826a.png'; // 默认图片
const articleStore  = new useArticleStore

onMounted(() => {
    getUserprivate()
})

async function getUserprivate() {
    const params = new URLSearchParams()
    params.append("userId", userId)
    try {
    const res = await selectUserprivate(params);
    console.log(res);
    if (res.code === 200) {
      articleList.splice(0, articleList.length, ...res.data.list);
      await fetchAuthorNames();
    }
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '获取数据失败: ' + error.message,
    });
  } finally {
    loading.value = false; // 结束加载
  }
}
// 获取所有文章的作者名称并发请求
const fetchAuthorNames = async () => {
  try {
    const authorPromises = articleList.map((article) => fetchAuthorName(article));
    // 使用 Promise.all 来并发请求每篇文章的作者名称
    await Promise.all(authorPromises);
  } catch (error) {
    console.error('获取作者名称失败:', error);
  }
};

// 获取单篇文章的作者名称
const fetchAuthorName = async (article) => {
  try {
    const params = new URLSearchParams();
    params.append("id", article.userId);
    const response = await getuserMessage(params);
    // 将作者名称添加到 article 对象中
    article.authorName = response.data.username;  // 假设返回的是 { username: '作者名' }
  } catch (error) {
    console.error('获取作者名称失败:', error);
    article.authorName = '未知作者'; // 如果获取失败，显示为未知作者
  }
};
function toPrivate(id){
    articleStore.isprvateOpen = true
    articleStore.articleId = id
}
</script>

<style scoped>

.article-card {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* 卡片间距 */
    padding: 0 10px;
    /* 左右内边距 */
}

.card {
    position: relative;
    width: calc(20% - 20px);
    /* 每行 5 个卡片，减去间距 */
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
}

.card:hover {
    transform: rotate(-5deg) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.9);
    /* 半透明背景 */
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card:hover .card__content {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
}

.card__title {
    margin: 0;
    font-size: 20px;
    color: #333;
    font-weight: 700;
}

.card__description {
    margin: 10px 0 0;
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

/* 响应式布局 */
@media (max-width: 1200px) {
    .card {
        width: calc(25% - 20px);
        /* 每行 4 个卡片 */
    }
}

@media (max-width: 992px) {
    .card {
        width: calc(33.33% - 20px);
        /* 每行 3 个卡片 */
    }
}

@media (max-width: 768px) {
    .card {
        width: calc(50% - 20px);
        /* 每行 2 个卡片 */
    }
}

@media (max-width: 480px) {
    .card {
        width: 100%;
        /* 每行 1 个卡片 */
    }
}
</style>
